var TableConfig = function () {
  var template = /* html */ `
    <div class="table-config" v-loading.fullscreen.lock="loading">
      <div class="table-config-btn">
        <el-button size="medium" type="primary" @click="ensure">确定</el-button>
      </div>
      <div class="table-config-setting" v-if="isShow">
        <div class="table-config-title">订单信息配置</div>
        <div class="table-config-content">
          <check-group :data="orderInfoColList" :size="orderInfoSize"></check-group>
        </div>
        <div class="table-config-title">物料类型配置</div>
        <div class="table-config-content">
          <check-group ref="materialTypeCheckGroup" filterable :data="tableTypeColList" :size="tableTypeSize">
            <template slot="search-input">
              <el-select clearable filterable v-model="search.bomOrder" size="small" style="width:150px" value-key="factoryNo" @change="orderChange"
                placeholder="请选择工厂型号">
                <el-option v-for="order in orderList" :key="order.id" :value="order" :label="order.factoryNo"></el-option>
              </el-select>
              <el-input v-model="search.filterValue" size="small" style="width:180px" placeholder="请输入过滤条件" @input="filterValueChange"></el-input>
            </template>
          </check-group>
        </div>
      </div>
    </div>
  `;

  return {
    props: {
      config: {
        type: Object,
        required: true
      },
      dropdownData: {
        type: Object,
        default: function () {
          return {};
        }
      }
    },

    data: function () {
      return {
        loading: false,
        isShow: false,
        tableTypeColList: [],
        tableTypeSize: 0,
        orderInfoColList: [],
        orderInfoSize: 0,
        orderList: [],
        search: {
          bomOrder: '',
          filterValue: ''
        }
      };
    },

    created: function () {
      this.loading = true;
      var self = this;
      this.setBomOrderList().then(function () {
        self.initData();
        self.isShow = true;
        self.loading = false;
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      setBomOrderList: function () {
        var dropdownData = this.dropdownData;
        var orderList = dropdownData.orderList;
        if (orderList !== undefined) {
          this.orderList = orderList;
          return Promise.resolve(orderList);
        }

        var self = this;
        return ajaxRequest('createOrderForBomOrder/getBomOrderTitleList', {
          status: 1
        }).then(function (res) {
          var orderList = res.returnData;
          orderList = _.map(orderList, function (order) {
            return {
              id: order.id,
              factoryNo: order.factoryNo,
              serialNo: order.serialNo
            };
          });
          self.orderList = orderList;
          dropdownData.orderList = orderList;
          return orderList;
        });
      },

      initData: function () {
        var config = this.config;

        var orderInfoColConfig = config.getOrderInfoColConfig();
        this.orderInfoColList = orderInfoColConfig.showList;
        this.orderInfoSize = orderInfoColConfig.maxSize;

        var materialTypeColConfig = config.getMaterialTypeColConfig();
        this.tableTypeColList = materialTypeColConfig.tableTypeColList;
        this.tableTypeSize = materialTypeColConfig.maxSize;
      },

      ensure: function () {
        var orderInfoColList = this.orderInfoColList;
        var hideColList = _.filter(orderInfoColList, {
          checked: false
        });
        if (hideColList.length === orderInfoColList.length) {
          this.$alert('请选择表格中需要显示的订单信息', '信息');
          return;
        }

        var tableTypeColList = this.tableTypeColList;
        tableTypeColList = _.filter(tableTypeColList, {
          checked: true
        });
        if (tableTypeColList.length === 0) {
          this.$alert('请选择表格中需要显示的物料类型', '信息');
          return;
        }

        this.toSaveConfig(tableTypeColList, hideColList);
      },

      toSaveConfig: function (tableTypeColList, hideColList) {
        this.loading = true;
        var self = this;
        Promise.all([
          this.saveOrderInfoConfig(hideColList),
          this.saveTableTypeConfig(tableTypeColList)
        ]).then(function () {
          self.loading = false;
          self.$alert('配置设置成功', '信息', {
            callback: function () {
              self.$emit('config-success');
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      },

      saveTableTypeConfig: function (tableTypeColList) {
        var typeList = _.map(tableTypeColList, 'label');
        var self = this;
        return ajaxRequest('displayView/setMaterialIsShow', {
          materialTypeArray: JSON.stringify(typeList)
        }).then(function (msg) {
          self.config.setMaterialTypeConfig(undefined, typeList);
          return msg;
        });
      },

      saveOrderInfoConfig: function (hideColList) {
        hideColList = _.map(hideColList, 'id');
        var postData = {
          columns: hideColList
        };
        var self = this;
        return ajaxRequest('tableCoucmnlConfig/saveConfig', {
          tableName: 'materialMatchBoard',
          hideColumn: JSON.stringify(postData)
        }).then(function (msg) {
          self.config.setOrderInfoConfig(hideColList);
          return msg;
        });
      },

      orderChange: function () {
        var search = this.search;
        var bomOrder = search.bomOrder;
        if (bomOrder === '') {
          this.$refs['materialTypeCheckGroup'].toSearchData({
            materialTypeList: [],
            filterValue: search.filterValue
          });
          return;
        }

        var self = this;
        this.loading = true;
        ajaxRequest('createOrderForBomOrder/getBomOrderById', {
          fullFactoryNo: bomOrder.factoryNo,
          status: 1
        }).then(function (res) {
          var materialList = [];
          if (res !== null) {
            materialList = res.materialList;
          }
          var materialTypeList = [];
          for (var i = 0; i < materialList.length; i++) {
            var material = materialList[i];
            if (material.materialCode === null) {
              continue;
            }
            materialTypeList.push(material.materialType);
          }
          materialTypeList = _.uniq(materialTypeList);
          self.$refs['materialTypeCheckGroup'].toSearchData({
            materialTypeList: materialTypeList,
            filterValue: search.filterValue
          });
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      filterValueChange:function(){
        var search = this.search;
        this.$refs['materialTypeCheckGroup'].searchData(search.filterValue);
      }
    },

    components: {
      CheckGroup: CheckGroup
    },

    template: template
  };
}();
